<template>
	<view class="fixtop">
		<fixtitletopVue>
			<template #l>
				<view class="fix-l" @click="back">
					<view>
						<view class="iconfont icon-jiantou"></view>
					</view>
				</view>
			</template>
			<template #c>
				<view class="saechin">
					<view class="fix-c">
						<view class="iconfont icon-sousuo"></view> <input v-model="keyword" type="text" placeholder="请输入搜索的商品"
							placeholder-class="slected" @confirm="seachdatasaa" />
					</view>
				</view>
			</template>
		</fixtitletopVue>
	</view>
	<view class="" :style="{height:heighttop}"></view>
	<view class="conbox" v-if="!seachdata.length">
		<view class="seach-hist">
			<view class="his-top">
				<view class="">搜索历史</view>
				<view class="iconfont icon-shanchu" @click="dalehisdata"></view>
			</view>
			<view class="nodata" v-if="!useaddresstore.address.length">暂无搜索</view>
			<view class="his-con" v-else>
				<view class="" v-for="i in useaddresstore.address" :key="i" @click="hiskey(i)">{{i}}</view>
			</view>
		</view>
		<view class="seach-hist" style="margin-top: 100rpx;">
			<view class="his-top">
				<view class="">猜你喜欢</view>
				<view class=""></view>
			</view>
			<view class="his-con">
				<view class="" v-for="i in cailove" :key="i" @click="hiskey(i)">{{i}}</view>
			</view>
		</view>
	</view>
<scroll-view scroll-y v-else @scrolltolower="reachboom">
	<view class=""  v-for="i in seachdata" :key="i.id" @click="goprsoxq(i)">
			<productCardVue :data="i"/>
	</view>
	<uni-load-more :status="datacurr.length<6?'no-more':'loading'"></uni-load-more>
</scroll-view>
</template>


<script setup>
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import addresstore from '@/store/seachhistry.js'
	import productCardVue from '../../components/product-card/product-card.vue';
	import {
		computed,
		ref
	} from 'vue';
	import {sseachpro} from '@/api/index.js'
	const keyword=ref('')
	const heighttop = gettitleheight() + getstatusheight() + 'px'
	const useaddresstore = addresstore()
	const cailove=["花甲粉","甜甜圈","面","蛋挞","豆浆","茶","炒米","水"]
	const offset=ref(1)
	const limit=ref(6)
	const seachdata=ref([])
	const datacurr=ref([])
	const goprsoxq=e=>{
		uni.navigateTo({
			url:`/pages/producet-xq/producet-xq?userid=${e.shoperid}&id=${e.id}`
		})
	}
	const hiskey=e=>{
		 keyword.value=e
		 seachdatasaa()
	}
	const back = () => {
		uni.navigateBack()
	}
	const reachboom=()=>{
		  if(datacurr.length<6)return 
		  offset.value++
		  seachdatas()
	}
	const seachdatasaa=()=>{
		offset.value=1
		seachdatas()
	}
	const seachdatas =async () => {
		if(!keyword.value.trim()){
			return uni.showToast({
				title:"请输入商品！",
				icon:"none"
			})
		}
		  const rudata=await sseachpro(keyword.value,limit.value,offset.value)
		  if(rudata.code==200){
			  datacurr.value=rudata.data
			  seachdata.value=[...seachdata.value,...rudata.data]
			  console.log(seachdata.value)
		  }
		useaddresstore.pushdatas(keyword.value)
		// useaddresstore.address=[`${e.detail.value}`].concat(useaddresstore.address)
	}
	const dalehisdata=()=>{
		uni.showModal({
			title:"提示",
			content:"确定要清除搜索历史？",
			success(e) {
				if(e.cancel)return 
				useaddresstore.address=[]
				uni.showToast({
					title:"已清除！",
					icon:"none"
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	scroll-view{
		height: calc(100vh - v-bind(heighttop));
		padding: 20rpx;
	}
	.conbox {
		height: calc(100vh - v-bind(heighttop));
		padding: 20rpx;

		.seach-hist {
			padding: 0 10rpx;

			.his-top {
				height: 60rpx;
				font-size: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000;
				font-weight: 700;

				.iconfont {
					color: #7b7b7b;
					font-size: 30rpx;
					font-weight: 700;
				}
			}

			.nodata {
				font-size: 25rpx;
				text-align: center;
				margin-top: 20rpx;
			}

			.his-con {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				margin-top: 10rpx;

				>view {
					padding: 10rpx 19rpx;
					font-size: 22rpx;
					border: 1rpx solid #7b7b7b;
					border-radius: 15rpx;
				}
			}
		}
	}

	:deep(.slected) {
		font-family: "Aa喵不可言";
	}

	.fixtop {
		position: fixed;
		width: 100%;
		top: 0;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #dcdcdc;

		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 25rpx;
			}
		}

		.saechin {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.fix-c {
				height: 80%;
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 30rpx;
				background-color: #eee;
				border-radius: 30rpx;
				font-size: 25rpx;

				.iconfont {
					margin: 0 15rpx;
				}
			}
		}

	}
</style>